<template>
    <div class="box">
        <nav class="nav">
            <span>用户名：</span>
            <input type="text" v-model="input" id="in" @keydown.enter="enter">
            <button @click="chaxun">查询</button>
            <button @click="add">添加</button>
            <button @click="remove">清除缓存</button>
        </nav>
        <div class="con">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="Id" width="150">
                </el-table-column>
                <el-table-column prop="userName" label="用户名" width="150">
                </el-table-column>
                <el-table-column prop="realName" label="真实姓名" width="150">
                </el-table-column>
                <el-table-column prop="role" label="学级" width="150">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="150">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="150">
                </el-table-column>
                <el-table-column prop="lastActiveTime" label="创建时间" width="150">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="90">
                    <template slot-scope="scope">
                        <div class="hz">
                            <span :class="scope.row.status == '启用' ? 'green' : 'red'">{{ scope.row.status }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="caozuo" label="操作">
                    <template slot-scope="scope">
                        <div class="hz">
                            <span class="jinyong">{{ scope.row.status == '启用' ? '禁用' : '启用' }}</span>
                            <span class="bj">编辑</span>
                            <span class="dateup">日志</span>
                            <span class="del" @click="deleteli(scope.$index)">删除</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>


    </div>
</template>
<script>
export default {
    data() {
        return {
            flag: true,
            input: "",
            tableData: [],
            newArr: [],
            total: 0,
            pageNo: 1,
            pageSize: 10,
            cxArr: [],
        }
    },
    methods: {
        remove() {
            sessionStorage.removeItem('tableArr')
            this.axios({
                url: "api/admin/user/page/list",
                method: 'post',
                data: {
                    "userName": "",  //用户名
                    "role": 1,   //角色
                    "pageIndex": this.pageNo,  //页码
                    "pageSize": this.pageSize,   //每页条数

                },
            }).then(res => {
                console.log(res);
                this.tableData = res.data.response.list
                this.total = res.data.response.total;
                console.log(this.tableData)
            })
        },
        chaxun() {
            if (this.input) {
                let aaa = this.cxArr.filter(item => {
                    return item.userName.includes(this.input);
                })
                this.tableData = aaa;
                return;
            }
            this.requestData();
        },
        add() {
            this.$router.push('/user/student/listbj')
        },
        deleteli(i) {
            this.tableData.splice(i, 1)
            sessionStorage.setItem('tableArr', JSON.stringify(this.tableData))
        },

        enter() {
            if (this.input !== '') {
                this.input = '';//清空input中的内容
            }

        },
        handleCurrentChange(val) {
            this.pageNo = val;
            this.requestData();
        },
        //页面条数发生改变执行
        handleSizeChange(val) {
            this.pageSize = val;
            this.requestData();
        },
        requestData() {
            let tableArr = JSON.parse(sessionStorage.getItem('tableArr'));
            if (tableArr) {
                this.tableData = tableArr;
                return;
            }
            this.axios({
                url: "api/admin/user/page/list",
                method: 'post',
                data: {
                    "userName": "",  //用户名
                    "role": 1,   //角色
                    "pageIndex": this.pageNo,  //页码
                    "pageSize": this.pageSize,   //每页条数

                },
            }).then(res => {
                console.log(res.data.response.list);
                this.tableData = res.data.response.list;
                this.cxArr = this.tableData;
                this.tableData.forEach(item => {
                    if (item.status == 0) {
                        item.status = ''
                    } else if (item.status == 1) {
                        item.status = '启用'
                    } else {
                        item.status = '禁用'
                    }
                })
                this.total = res.data.response.total;
                console.log(this.tableData)
            })
        },
    },
    beforeMount() {
        this.requestData();
    },
    mounted() {
        this.requestData();
    },
    components: {

    }
}
</script>
<style lang="scss" scoped> .box {
     width: 100%;

     .green {
         background-color: #E7FAF0;
         color: #57DBDA;
     }

     .red {
         background-color: #FFEDED;
         color: #FF498E;
     }

     .green,
     .red {
         padding: 6px 0;
         border-radius: 5px;
     }

     .nav {
         margin: 20px;

         >input {
             height: 36px;
             line-height: 36px;
             outline: none;
         }

         button {
             background: rgb(24, 144, 255);
             border: none;
             color: white;
             width: 70px;
             height: 36px;
             margin-left: 10px;
             border-radius: 10px;
         }
     }

     .con {
         .hz {
             .jinyong {}

             span {
                 border: 1px solid #ccc;
                 margin-left: 5px;
                 width: 56px;
                 height: 28px;
                 padding: 2px 10px;
             }

             .del {
                 background-color: red;
                 color: #fff;
             }
         }
     }
 }
</style>